<template>
  <div :id="id" class="echarts"></div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: "lineChart",
  components: {},
  props:{
    id: {
      type: String,
      default: 'echarts'
    },
    legendData: {
      type: Array,
      default: function () {
        return []
      }
    },
    keyData: {
      type: Array,
      default: function () {
        return []
      }
    },
    dataList: {
      type: Array,
      default: function () {
        return []
      }
    },
  },
  data () {
    return {
      lineCharts:null,
    };
  },
  mounted () {},
  methods: {
    getEcharts(){
      let that=this;
      if(!that.lineCharts){
        var chartDom = document.getElementById(that.id);
        that.lineCharts = echarts.init(chartDom);
      }else{
        that.lineCharts.clear();
      }
      var option;
      option = {
        legend: {
          type: 'scroll',
          data: that.legendData,
        },
        tooltip: {
          trigger: 'item',
          triggerOn : 'mousemove',
          axisPointer: {     // 坐标轴指示器，坐标轴触发有效
            type: 'line',   // 默认为直线，可选为：'line' | 'shadow' 'cross'
            label:{}
          },
          formatter:function (params) {
            return '<div>'+params.seriesName+ '<span style="color: red;"> '+params.value+'</span></div>';
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          splitLine: { show: false },
          axisPointer: {
            type: 'shadow'
          },
          data: that.keyData
        },
        yAxis: {
          type: 'value',
        },
        series: that.dataList
      };
      option && that.lineCharts.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
.echarts{
  width: 100%;
  height:400px;
  background-color:#ffffff;
}
</style>
